<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script> 

</head>

<body>
    <div id="root">
        <!-- 第三步 引用 -->
         <school></school>
    </div>
</body>

<!-- 1.一个重要的内置关系: VueComponent.prototype._proto === Vue .prototype
2.为什么要有这个关系: 让组件实例对象 (vc) 可以访问到 Vue原型上的属性、方法。 -->
<script type="text/javascript">
   Vue.config.productionTip=false;
 
   Vue.pro
   //   VueComponent的枚造函数  这里要注意一些  实例对象是<school/>才生成的，不要把school当成实例对象看哦
   let school = Vue.extend({
    template:`
    <div>
        <h1> 名称:{{schoolName}}</h1>
        <h1>地址:{{address}}</h1>
        <button @click="showNN">点我显示</button>
    </div>
    `,
    data() {
        return {
            schoolName:'清华',
            address: '北京'
        }
    },
    methods: {
        showNN(){
            console.log(this.nn)
        }
    },
   })

  
    let vm =new Vue({
        el:"#root",
        components:{
            school
        }
    })

    function Demo(){
        this.a=1,
        this.b=2
    }
    const d = new Demo();
 
    console.log(d.__proto__ === Demo.prototype)
    
    Demo.prototype.x=10;
    console.log('@',d)


    
</script>
</html>